<template>
  <div class="statisticsIndexPage h100">
    <div class="statisticsIndexLeft">
      <ul class="statisticsListUl">
        <li
          class="statisticsListItem"
          v-for="item in menus"
          :key="item.id"
          :class="{active:$route.params.type === item.id}"
          @click="goTo(item.id)">
          <span class="typeName">{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <div class="statisticsIndexRight">
      <component :is="statisticsComp"></component>
    </div>
  </div>
</template>
<script>
import OutlineComp from '../outline/index.vue'
import TaskComp from '../task/index.vue'
import ExceptionComp from '../exception/index.vue'
import ServiceComp from '../exception/service.vue'
import InternetFlowComp from '../inertnetFlow/index.vue'
import InternetFlowDetailComp from '../inertnetFlow/detail.vue'
import { statisticsMenu } from '../config/list'
import { statisticsPerms } from '@/config/permission/index'
const authConfig = {
  outline: {
    view: statisticsPerms.summary.view,
    title: '概要统计查询'
  },
  exception: {
    view: statisticsPerms.clientLog.view,
    title: '升级异常统计查询'
  },
  task: {
    view: statisticsPerms.task.view,
    title: '任务统计查询'
  },
  service: {
    view: statisticsPerms.serviceClientLog.view,
    title: '服务异常统计查询'
  },
  internetFlow: {
    view: statisticsPerms.flow.view,
    title: '流量统计查询'
  },
  internetFlowDetail: {
    view: statisticsPerms.flowDetail.view,
    title: '流量明细查询'
  },
  monitor: {
    view: statisticsPerms.task.view,
    title: '升级监控'
  }
}
export default {
  components: {
    OutlineComp,
    TaskComp,
    ExceptionComp,
    ServiceComp,
    InternetFlowComp,
    InternetFlowDetailComp,
    MonitorComp
  },
  computed: {
    menus () {
      return statisticsMenu.filter(item => {
        return this.$hasPermission([item.key])
      })
    }
  },
  data () {
    return {
      statisticsComp: null
    }
  },
  watch: {
  },
  created () {
    let val = this.$route.params;
    if (authConfig[val.type] && this.$hasPermission([authConfig[val.type].view])) {
      this.statisticsComp = val.type.charAt(0) + val.type.slice(1) + 'Comp'
    } else {
      if (this.$route.query.dir === '1') {
        // 说明是点击统计跳转过来时,默认跳转的菜单没有权限时需要处理下
        if (this.$hasPermission([authConfig.task.view])) {
          this.$router.replace('/statistics/task')
          return
        }
        if (this.$hasPermission([authConfig.exception.view])) {
          this.$router.replace('/statistics/exception')
          return
        }
      }
      this.$router.replace('/403/inner')
    }
  },
  methods: {
    goTo (name) {
      this.$router.push({
        path: `/statistics/${name}`
      })
    }
  }
}
</script>
<style scoped lang="less">
.statisticsIndexPage {
    position: relative;
    display: flex;
    min-width: 1000px;
    overflow: hidden;
    .statisticsIndexLeft {
        flex: 0 0 160px;
        border-right: 1px solid @borderColor;
    }
    .statisticsListUl {
        padding-top: 30px;
        .statisticsListItem {
            height: 48px;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 0 24px;
            cursor: pointer;
            color: @color333;
            &:hover {
                background-color: @blockHoverBgColor;
                .typeName {
                    color: @blockHoverTextColor;
                }
            }
            &.active {
                .typeName {
                    color: @blockHoverTextColor;
                }
            }
        }
        .iconfont {
            margin-right: 10px;
        }
    }
    .statisticsIndexRight {
        flex: 1 0 0;
        overflow: auto;
    }
}
</style>
